<html>
<head>
    <title>Limitless Quest Tile Engine .07</title>
    <style>
    	.tile {
    		height: 32px; width: 32px; 
    		xfloat: left;
    		position: absolute;
    	}
    	.char {
    		height: 32px; width: 32px;
    		position: absolute;
    		z-index:200;
    	}
    	.row {
    		clear: left;
    	}
    	.level{
    		position: relative;
    	}
    </style>
  	<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script> 
  
    <!-- logger includes -->
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css"> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script> 
    
    
	<script type="text/javascript" charset="utf-8">
		YAHOO.namespace('alw.llq');
		//console.log(YAHOO.alw)
		//alert('hello')
		YAHOO.alw.llq = function(){
			var imgs = {
				dungeon : "http://limitlessquest.com/tests/images/dg_dungeon32.png",
				uniques : "http://limitlessquest.com/tests/images/dg_uniques32.png"
			
			};
			
			var character = function(chid){
				return {
					id: chid,
					type: '',
					stats: {
						health: 100,
						atk: 1,
						def: 1
					},
					x: 0,
					y: 0,
					col: 0,
					row: 0,
					img: {
						src: "uniques",
						xOffset: 0,
						yOffset: 0
					},
					domEl:null,
					renderChar: function(){
						var charCont = document.createElement('div');
						charCont.setAttribute('id', this.id)
						YAHOO.util.Dom.addClass(charCont,'char');
						charCont.setAttribute('style','background-image:url('+YAHOO.alw.llq.getImgBase('uniques')+');top:0; left:0; background-position:-'+this.img.xOffset+'px -'+this.img.yOffset+'px');
						YAHOO.util.Dom.get('llqlevel').appendChild(charCont);
						//console.log(this.domEl)
						this.domEl = charCont;
					},
					moveChar: function(col, row){
						oPos = YAHOO.util.Dom.getXY('origin')
						
						
						if(!this.checkColl(col,row)){
							this.row = row;
							this.col = col;
							//YAHOO.util.Dom.setXY(this.domEl, [(row*32) + oPos[0],(col*32)+oPos[1]]);
							var anim = new YAHOO.util.Motion(this.domEl, {points: {to: [(row*32) + oPos[0],(col*32)+oPos[1]]}},.5, YAHOO.util.Easing.easeOut);
							anim.onComplete.subscribe(function(){YAHOO.alw.llq.globals.eventDepot.playerMove.fire();})
							anim.animate();
						}
					},
					checkColl: function(col, row){
						var map = YAHOO.alw.llq.globals.map;
						return map.data[col][row].collision;
					},
					moveCharDir: function(dir){
						//YAHOO.log("moveCharDir called on "+this.id+". Direction:" + dir );
						//YAHOO.alw.llq.globals.eventDepot.playerMove.fire();
						curRow = this.row;
						curCol = this.col;
						maxCol = YAHOO.alw.llq.globals.map.data[0].length-1;
						maxRow = YAHOO.alw.llq.globals.map.data.length-1;
						//console.log('maxCol' + maxCol + " maxRow" + maxRow);
						switch(dir){
							case 'north':
									if(curCol > 0){
										curCol--;
									}
								break
							case 'south':
								if(curCol < maxCol){
									curCol++;
								}
								break
							case 'west':
								if(curRow > 0){
									curRow--;
								}
								break
							case 'east' :
								if(curRow < maxRow){
									curRow++;
								}
								break
							default:	
						
						}
						this.moveChar(curCol,curRow);
					},
					moveCharNorth: function(){
						this.moveCharDir('north');
					},
					moveCharSouth: function(){
						this.moveCharDir('south');
					},
					moveCharEast: function(){
						this.moveCharDir('east');
					},
					moveCharWest: function(){
						this.moveCharDir('west');
					},
					moveCharRand: function(el){
						//console.log('moveCharRand:' )
						//console.log(el)
						var dirs = ["north","south","east","west"];
						var go = Math.floor(Math.random()*dirs.length);
						//console.log(go)
						el.moveCharDir(dirs[go]);
					}
					
				}
			};
			var	tile = function(argObj){
				
				return {
					id: argObj.name,
					collision: argObj.collision,
					img: null,
					color: '#000000',
					action: null,
					symbol: "a",
					base: argObj.base,
					xOff: argObj.xOff,
					yOff: argObj.yOff
					
				}
			}
			
			var level = function(){
			     
			     return {
			         rows: 1,
			         cols: 1,
			         elevation: 0,
                     data: [
                         
                     ],
                     setData: function(){
                     	this.data = window.mapData;	
                 	},
                 	renderLevel: function(){
                 		//console.log('rendering data :')
                 		//console.log(this.data)
                 		var d = this.data;
                 		var outPut = '';
                 		outPut +="<div id='llqlevel' class='level'>"
                 		var dlen = d.length;
                 		for(i =0; i < dlen; i++){
                 			//console.log('row' + i);
                 			var dilen = d[i].length;
                 			outPut += "<div class='row'>"
                 			for(j = 0 ; j < dilen; j++){
                 				//console.log('col' + j);
                 				outPut += "<div class='tile' ";
                 				if(i == 0 && j == 0){
                 					outPut +="id='origin'"
                 				}
                 				outPut += "style='background-image: url("+YAHOO.alw.llq.getImgBase(d[i][j].base)+");";
                 				outPut+="background-position: -"+d[i][j].xOff+"px -"+d[i][j].yOff+"px; z-index: 100; top:"+32*i+"px; left:"+32*j+"'";
                 				//outPut += "style='background-color: tan;'";
                 				outPut += "></div>";
                 			}
                 			outPut +="</div>"
                 		}
                 		outPut +="</div>"
                 		//console.log(outPut)
                 		YAHOO.util.Dom.get('target').innerHTML = outPut;
                 	}
			     }
			
			}
			
			var eventDepot = function (){
				var playerMove = new YAHOO.util.CustomEvent("playermove");
				
				playerMove.subscribe(monitorEvent1)
				
				function monitorEvent1(){
					YAHOO.log('playerMove event happened!')
					/* check for collision with monster */
					playerCoords = {row:YAHOO.alw.llq.globals.character.row, col:YAHOO.alw.llq.globals.character.col }
					//YAHOO.log('player coords: row: '+ YAHOO.alw.llq.globals.character.row + "col: " +YAHOO.alw.llq.globals.character.col);
					var mons = YAHOO.alw.llq.globals.monsters;
					for(i = 0; i < mons.length; i++){
						if(playerCoords.row == mons[i].row && playerCoords.col == mons[i].col){
							YAHOO.log('collision');
						}
					}
					
				}
				
				
				return{
					playerMove : playerMove
					
				}
			}
			
			return {
				globals: {
					tilesize: 32,
					map: null,
					character: null,
					monsters: [], 
					eventDepot: null
				},
				init: function(){
					//console.log('init called!');
					//console.log(this.globals)
					var myLogReader = new YAHOO.widget.LogReader(); 
					YAHOO.log('init called! Starting up');
					this.globals.eventDepot = new eventDepot();
					this.globals.map = new level();
					this.globals.map.setData();
					this.globals.map.renderLevel();
					this.globals.character = new character('player');
					this.globals.character.renderChar();
					this.globals.character.moveChar(1,1);
					//this.globals.character.moveCharDir('east')
					//this.globals.character.moveCharDir('south')
					//var kl1 = new YAHOO.util.KeyListener(document, { keys:89 },{ fn: this.globals.character.moveCharSouth} );
					var kl1 = new YAHOO.util.KeyListener(document, {keys: 40 }, 
						{
							fn: YAHOO.alw.llq.globals.character.moveCharSouth,
							scope: YAHOO.alw.llq.globals.character,
							correctScope: true
						}
						);
					var kl2 = new YAHOO.util.KeyListener(document, {keys: 38 }, 
						{
							fn: YAHOO.alw.llq.globals.character.moveCharNorth,
							scope: YAHOO.alw.llq.globals.character,
							correctScope: true
						}
						);
					var kl3 = new YAHOO.util.KeyListener(document, {keys: 39 }, 
						{
							fn: YAHOO.alw.llq.globals.character.moveCharEast,
							scope: YAHOO.alw.llq.globals.character,
							correctScope: true
						}
						);
 					var kl4 = new YAHOO.util.KeyListener(document, {keys: 37 }, 
						{
							fn: YAHOO.alw.llq.globals.character.moveCharWest,
							scope: YAHOO.alw.llq.globals.character,
							correctScope: true
						}
						);	
					kl1.enable();
					kl2.enable();
					kl3.enable();
					kl4.enable();
					
					this.globals.monsters[0] = new character('ogre');
					var mon = this.globals.monsters[0]
					mon.col = 5;
					mon.row = 3;
					mon.img.xOffset = 3 * 32;
					mon.img.yOffset = 0 * 32;
					mon.renderChar();
					mon.moveChar(3,1);
					window.setInterval('YAHOO.alw.llq.globals.monsters[0].moveCharRand(YAHOO.alw.llq.globals.monsters[0])', 3000);
					
				},
				getImgBase: function(desc){
					return imgs[desc]
				},
				makeTile: function(id){
					return new tile(id)
				}
			}
		}();
		YAHOO.util.Event.on(window,'load',YAHOO.alw.llq.init, YAHOO.alw.llq, true)
		
	</script>
	
	<script>
		var a = {name: 'firstTile', x: 32, y:64, base: 'dungeon'};
		var b = {name: 'firstTile', x: 0, y:0, base: 'dungeon'};
		var c = {name: 'firstTile', x: 32, y:32, base: 'dungeon'};
		var w = {name: 'wall', x: 0, y: 32*4, base: 'dungeon'};
		var aa = YAHOO.alw.llq.makeTile({name:'wall',xOff:0,yOff:32*4,base:'dungeon',collision: true});
		var bb = YAHOO.alw.llq.makeTile({name:'floor', xOff:0, yOff:0, base:'dungeon', collision: false})

		mapData=[
			[aa,bb,aa,aa,aa,aa,aa,aa,aa,aa],
			[aa,bb,bb,bb,bb,bb,bb,bb,bb,aa],
			[aa,bb,bb,bb,bb,bb,bb,bb,bb,aa],
			[aa,bb,bb,bb,bb,bb,bb,bb,bb,aa],
			[aa,bb,bb,bb,bb,bb,bb,bb,bb,aa],
			[aa,bb,bb,bb,bb,bb,bb,bb,bb,aa],
			[aa,bb,bb,bb,aa,aa,aa,aa,bb,aa],
			[aa,bb,bb,bb,bb,bb,bb,aa,bb,aa],
			[aa,bb,bb,bb,bb,bb,bb,aa,bb,aa],
			[aa,aa,aa,aa,aa,aa,aa,aa,aa,aa]
			
		
		]
	</script>
</head>
<body id="tile" onload="">
	<h2>Tile Engine Tests</h2>
	<div id='target'>
	
	</div>
</body>
</html>
